<template>
	<bigScreenContainer>
		<div class="HomePageClass">
			<!-- header -->
			<div class="page_header" :style="{
                background: `url(${componentContent.imageMap['bg_head']}) no-repeat`,
                'background-size': '100% 100%',
            }">
				<span>腾 洋 生 产 驾 驶 舱</span>
			</div>
			<div class="homeContent">
				<div class="homeBody">
					<div class="home_top">
						<div class="l_left">
							<com-box titTxt="生产任务" :tabData="title1" :value.sync="area1" @tabChange="tabChange1">
								<div class="chart_" v-if="area1 == '在产任务'" ref="zaichanrenwuDom" key="zaichanrenwuDom">
								</div>
								<div class="chart_" v-else-if="area1 == '任务下发分布'" ref="renwuxiafafenbuDom"
									key="renwuxiafafenbuDom">
								</div>
							</com-box>
							<com-box titTxt="任务进度" :tabData="title2" :value.sync="area2" @tabChange="tabChange2">
								<div class="chart_" v-if="area2 == '任务排产数量'" ref="renwupaichanshuliangDom"
									key="renwupaichanshuliangDom"></div>
								<div class="chart_" v-else-if="area2 == '完工数量'" ref="wangongshuliang2Dom"
									key="wangongshuliang2Dom">
								</div>
								<div class="chart_" v-else-if="area2 == '及时完工数量'" ref="jishiwangongshuliang2Dom"
									key="jishiwangongshuliang2Dom"></div>
							</com-box>
						</div>
						<div class="l_center">
							<com-box titTxt="工单生产进度">
								<div class="table_">
									<div class="table-wrapper">
										<!-- 表头固定 -->
										<div class="table-header">
											<el-table :data="tableData1" style="width: 100%"
												:row-class-name="tableRowClassName" algin="center">
												<!-- <el-table-column type="index" label="排名" width="50">
                        </el-table-column> -->
												<el-table-column prop="gdh" label="工单号">
												</el-table-column>
												<el-table-column prop="cpmc" label="产品名称">
												</el-table-column>
												<el-table-column prop="pcsh" label="排产数量" width="100">
												</el-table-column>
												<el-table-column prop="ywcsl" label="已完成数量" width="100">
												</el-table-column>
											</el-table>
										</div>

										<!-- 表格内容可滚动 -->
										<div class="scroll-wrapper" :style="{
                                            transform: `translateY(-${scrollPosition}px)`,
                                            transition: isSmooth
                                                ? 'transform 1s linear'
                                                : 'none',
                                        }" @transitionend="onTransitionEnd">
											<el-table :data="extendedData" style="
                                                    width: 100%;
                                                    height: 100%;
                                                " ref="table" :show-header="false" :row-class-name="tableRowClassName
                                                    " algin="center">
												<el-table-column prop="gdh" label="工单号">
												</el-table-column>
												<el-table-column prop="cpmc" label="产品名称">
												</el-table-column>
												<el-table-column prop="pcsh" label="排产数量" width="100">
												</el-table-column>
												<el-table-column prop="ywcsl" label="已完成数量" width="100">
												</el-table-column>
											</el-table>
										</div>
									</div>
								</div>
							</com-box>
						</div>
						<div class="l_right">
							<com-box titTxt="生产月计划" :tabData="title4" :value.sync="area4" @tabChange="tabChange4">
								<div class="chart_" v-if="area4 == '排产计划'" ref="paichanjihuaDom" key="paichanjihuaDom">
								</div>
								<div class="chart_" v-else-if="area4 == '完成计划'" ref="wanchengjihuaDom"
									key="wanchengjihuaDom"></div>
								<div class="chart_" v-else-if="area4 == '延期计划'" ref="yanqijihuaDom" key="yanqijihuaDom">
								</div>
							</com-box>
							<com-box titTxt="月计划执行" :tabData="title5" :value.sync="area5" @tabChange="tabChange5">
								<div class="chart_" v-if="area5 == '工单数量'" ref="gongdanshuliangDom"
									key="gongdanshuliangDom"></div>
								<div class="chart_" v-else-if="area5 == '完工数量'" ref="wangongshuliangDom"
									key="wangongshuliangDom"></div>
								<div class="chart_" v-else-if="area5 == '及时完工数量'" ref="jishiwangongshuliangDom"
									key="jishiwangongshuliangDom"></div>
							</com-box>
						</div>
					</div>
					<div class="home_bottom">
						<div class="l_left">
							<com-box titTxt="生产分析" :tabData="title3" :value.sync="area3" @tabChange="tabChange3">
								<div class="chart_" v-if="area3 == '产品缺陷分析'" ref="chanpinquexianfenxiDom"
									key="chanpinquexianfenxiDom">
								</div>
								<div class="chart_" v-else-if="area3 == '计划未达成原因分析'" ref="jihuaweidachengyuanyinDom"
									key="jihuaweidachengyuanyinDom"></div>
							</com-box>
						</div>
						<div class="l_right">
							<com-box titTxt="工单齐套率" :tabData="title6">
								<div class="chart_" ref="gongdanqitaolvDom" key="gongdanqitaolvDom"></div>
							</com-box>
						</div>
					</div>
				</div>
			</div>
		</div>
	</bigScreenContainer>
</template>
<script>
	// import * as echarts from "echarts";
const comBox = {
    // template: `
    //     <div class="ConBoxClass_">
    //         <div class="title_">
    //             {{ titTxt }}
    //         </div>
    //         <div class="tab_" v-if="tabData.length>0">
    //         <div v-for="item in tabData" :style="{background: item.bgColor}" @click="selectTab(item)">
    //             <label>{{ item.bigTitle }}</label>
    //             <span v-if="item.smallTitle" :style="{color: item.lineColor}">{{ item.smallTitle }}</span>
    //             <hr v-if="item.select" :style="{background: item.lineColor}" />
    //         </div>
    //         </div>
    //         <div class="content_">
    //             <slot />
    //         </div>
    //     </div>
    // `,
    props: {
        titTxt: {
            type: String,
            default: "",
        },
        tabData: {
            type: Array,
            default: function () {
                return [];
            },
        },
    },
    data() {
        return {};
    },
    methods: {
        selectTab(item) {
            this.tabData.forEach((it) => {
                it.select = false;
                if (it.bigTitle == item.bigTitle) {
                    it.select = true;
                }
            });
            this.$emit("update:value", item.bigTitle);
            this.$emit("tabChange", item.bigTitle);
        },
    },
    render(h) {
        return h(
            "div",
            {
                class: "ConBoxClass_",
                style: {
                    width: "100%",
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                },
            },
            [
                h(
                    "div",
                    {
                        class: "title_",
                        style: {
                            textAlign: "center",
                            fontSize: "22px",
                            color: "#0095ff",
                            paddingTop: "20px",
                            paddingBottom: "20px",
                            height: "60px",
                            boxSizing: "border-box",
                            flexShrink: "0",
                        },
                    },
                    this.titTxt
                ),
                this.tabData.length > 0
                    ? h(
                        "div",
                        {
                            class: "tab_",
                            style: {
                                height: "60px",
                                display: "flex",
                                flexDirection: "row",
                                justifyContent: "space-between",
                                flexShrink: "0",
                            },
                        },
                        this.tabData.map((item) =>
                            h(
                                "div",
                                {
                                    style: {
                                        background: item.bgColor,
                                        flex: 1,
                                        display: "flex",
                                        flexDirection: "column",
                                        justifyContent: "center",
                                        alignItems: "center",
                                        position: "relative",
                                    },
                                    on: { click: () => this.selectTab(item) },
                                },
                                [
                                    h(
                                        "label",
                                        {
                                            style: {
                                                fontSize: "16px",
                                                color: "#FFFFFF",
                                            },
                                        },
                                        item.bigTitle
                                    ),
                                    item.smallTitle
                                        ? h(
                                            "span",
                                            {
                                                style: {
                                                    color: item.lineColor,
                                                    fontSize: "16px",
                                                },
                                            },
                                            item.smallTitle
                                        )
                                        : null,
                                    item.select
                                        ? h("hr", {
                                            style: {
                                                background: item.lineColor,
                                                position: "absolute",
                                                width: "100%",
                                                height: "2px",
                                                border: "none",
                                                bottom: "0",
                                            },
                                        })
                                        : null,
                                ]
                            )
                        )
                    )
                    : null,
                h(
                    "div",
                    {
                        class: "content_",
                        style: {
                            flex: "auto",
                            flexShrink: "0",
                            background: "rgba(255, 255, 255, 0.05)",
                            overflow: "hidden",
                        },
                    },
                    this.$slots.default
                ),
            ]
        );
    },
};

export default {
    name: "development", // 研发
    components: { comBox },
    data() {
        return {
            componentContent,
            extendedData: [], // 扩展后的数据（首尾相连）
            scrollPosition: 0, // 当前滚动位置
            rowHeight: 50, // 单行高度（需根据实际表格调整）
            isSmooth: true, // 是否启用平滑滚动
            timer: null, // 定时器
            tableData1: [],
            tableData: [
            ],
            title1: [
                {
                    bigTitle: "在产任务",
                    // smallTitle: '6811.69万元',
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
                {
                    bigTitle: "任务下发分布",
                    // smallTitle: '6790.48万元',
                    bgColor: " rgba(32,252,255,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
            ],
            title2: [
                {
                    bigTitle: "任务排产数量",
                    // smallTitle: '6811.69万元',
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
                {
                    bigTitle: "完工数量",
                    // smallTitle: '1736份',
                    bgColor: "rgba(70,168,247,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
                {
                    bigTitle: "及时完工数量",
                    // smallTitle: '9763.61万元',
                    bgColor: "rgba(230,207,92,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
            ],
            title3: [
                {
                    bigTitle: "产品缺陷分析",
                    // smallTitle: '',
                    bgColor: "rgba(70,168,247,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
                {
                    bigTitle: "计划未达成原因分析",
                    // smallTitle: '',
                    bgColor: "rgba(230,207,92,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
            ],
            title4: [
                {
                    bigTitle: "排产计划",
                    // smallTitle: '352184.47件',
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
                {
                    bigTitle: "完成计划",
                    // smallTitle: '312822.47件',
                    bgColor: "rgba(230,207,92,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
                {
                    bigTitle: "延期计划",
                    // smallTitle: '88.82%',
                    bgColor: "rgba(32,252,255,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
            ],
            title5: [
                {
                    bigTitle: "工单数量",
                    // smallTitle: '10824件',
                    bgColor: "rgba(32,252,255,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
                {
                    bigTitle: "完工数量",
                    // smallTitle: '3.07%',
                    bgColor: "rgba(70,168,247,0.25)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
                {
                    bigTitle: "及时完工数量",
                    // smallTitle: '',
                    bgColor: "rgba(230,207,92,0.25)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
            ],
            title6: [
                {
                    bigTitle: "工单齐套率",
                    // smallTitle: '',
                    bgColor: "rgba(70,168,247,0.25)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
            ],
            area1: "在产任务",
            area2: "任务排产数量",
            area3: "产品缺陷分析",
            area4: "排产计划",
            area5: "工单数量",

            option11_data_lastYear: [],
            option11_data_currentYear: [],

            option12_data_lastYear: [],
            option12_data_currentYear: [],

            option21_data_lastYear: [],
            option21_data_currentYear: [],

            option22_data_lastYear: [],
            option22_data_currentYear: [],

            option23_data_lastYear: [],
            option23_data_currentYear: [],

            option41_data_lastYear: [],
            option41_data_currentYear: [],

            option42_data_lastYear: [],
            option42_data_currentYear: [],

            option43_data_lastYear: [],
            option43_data_currentYear: [],

            option51_data_lastYear: [],
            option51_data_currentYear: [],

            option52_data_lastYear: [],
            option52_data_currentYear: [],

            option53_data_lastYear: [],
            option53_data_currentYear: [],

            option61_data_currentYear: [],
            currentYear: "",
            lastYear: "",
            dataMonth: [],
            dataYuanYin: [],
            dataQueXian: []
        };
    },
    computed: {
        option11() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                yAxis: {
                    type: "value",
                    name: "单位：单",
                    nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F4A460", "#00BFBF"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(244,164,96,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option11_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,191,191,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option11_data_currentYear,
                    },
                ],
            };
        },
        option12() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：单",
                    nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F4A460", "#00BFBF"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(244,164,96,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option12_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,191,191,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option12_data_currentYear,
                    },
                ],
            };
        },
        option21() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#00CFFF", "#006FFF"],
                series: [
                    {
                        type: "bar",
                        name: this.lastYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option21_data_lastYear,
                    },
                    {
                        type: "bar",
                        name: this.currentYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option21_data_currentYear,
                    },
                ],
            };
        },
        option22() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F2B39D", "#AFE8D8"],
                series: [
                    {
                        type: "bar",
                        name: this.lastYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option22_data_lastYear,
                    },
                    {
                        type: "bar",
                        name: this.currentYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option22_data_currentYear,
                    },
                ],
            };
        },
        option23() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#5A78B8", "#FF8888"],
                series: [
                    {
                        type: "bar",
                        name: this.lastYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option23_data_lastYear,
                    },
                    {
                        type: "bar",
                        name: this.currentYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option23_data_currentYear,
                    },
                ],
            };
        },
        option31() {
            return {
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    orient: "vertical",
                    right: "10%",
                    top: "center",
                    itemWidth: 15,
                    itemHeight: 8,
                    itemGap: 20,
                    textStyle: {
                        color: "#DDDDDD",
                        fontSize: 14,
                    },
                },
                // color: ['#02F3F0', '#0294F5', '#EFE362', '#0BEB8A', '#6060F9', '#6EBDF6'],
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: "50%",
                        center: ["40%", "55%"],
                        data: this.dataQueXian,
                        itemStyle: {
                            borderColor: "#2b3841",
                            borderWidth: 1,
                        },
                        label: {
                            formatter: "{b}:{d}%",
                            textStyle: {
                                color: "inherit",
                                fontSize: 14,
                                fontWeight: 600,
                            },
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "#DDDDDD",
                            },
                        },
                    },
                ],
            };
        },
        option32() {
            return {
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    orient: "vertical",
                    right: "10%",
                    top: "center",
                    itemWidth: 15,
                    itemHeight: 8,
                    itemGap: 20,
                    textStyle: {
                        color: "#DDDDDD",
                        fontSize: 14,
                    },
                },
                // color: ['#02F3F0', '#0294F5', '#EFE362', '#0BEB8A', '#6060F9', '#6EBDF6'],
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: "50%",
                        center: ["40%", "55%"],
                        data: this.dataYuanYin,
                        itemStyle: {
                            borderColor: "#2b3841",
                            borderWidth: 1,
                        },
                        label: {
                            formatter: "{b}:{d}%",
                            textStyle: {
                                color: "inherit",
                                fontSize: 14,
                                fontWeight: 600,
                            },
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "#DDDDDD",
                            },
                        },
                    },
                ],
            };
        },
        option41() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F4A460", "#00BFBF"],
                series: [
                    {
                        type: "bar",
                        name: this.lastYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option41_data_lastYear,
                    },
                    {
                        type: "bar",
                        name: this.currentYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option41_data_currentYear,
                    },
                ],
            };
        },
        option42() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#5A78B8", "#FF8888"],
                series: [
                    {
                        type: "bar",
                        name: this.lastYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option42_data_lastYear,
                    },
                    {
                        type: "bar",
                        name: this.currentYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option42_data_currentYear,
                    },
                ],
            };
        },
        option43() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#43A8F4", "rgb(49,234,180)"],
                series: [
                    {
                        type: "bar",
                        name: this.lastYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option43_data_lastYear,
                    },
                    {
                        type: "bar",
                        name: this.currentYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option43_data_currentYear,
                    },
                ],
            };
        },
        option51() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#5A78B8", "#FF8888"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(90,120,184,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option51_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(255,136,136,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option51_data_currentYear,
                    },
                ],
            };
        },
        option52() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#5A78B8", "#FF8888"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(90,120,184,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option52_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(255,136,136,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option52_data_currentYear,
                    },
                ],
            };
        },
        option53() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#5A78B8", "#FF8888"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(90,120,184,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option53_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(255,136,136,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option53_data_currentYear,
                    },
                ],
            };
        },
        option61() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：%",
                    nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F2B39D"],
                series: [
                    {
                        name: "",
                        type: "line",
                        // smooth: true,
                        symbol: "emptyCircle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4,
                            type: "solid",
                        },
                        label: {
                            show: true,
                            position: "top",
                            fontSize: 12,
                            color: "#F2B39D",
                        },
                        data: this.option61_data_currentYear,
                    },
                ],
            };
        },
    },
    created() {
        const currentDate = new Date();
        const currentYear = currentDate.getFullYear();
        currentDate.setFullYear(currentYear - 1);
        const lastYear = currentDate.getFullYear();
        this.currentYear = currentYear;
        this.lastYear = lastYear;
    },
    async mounted() {
        await this.getData();
        this.initializeData(); // 初始化数据
        this.startScroll(); // 开始滚动
        this.$nextTick(() => {
            // 动态 DOM 更新后重新获取高度
            const heights = this.getRowHeights();
            this.rowHeight = heights[0];
            console.log("更新后的行高：", heights);

            echarts.init(this.$refs.zaichanrenwuDom).setOption(this.option11);
            echarts
                .init(this.$refs.renwupaichanshuliangDom)
                .setOption(this.option21);
            // echarts.init(this.$refs.gongyingshangpaimingDom).setOption(this.option31);
            echarts.init(this.$refs.paichanjihuaDom).setOption(this.option41);
            echarts
                .init(this.$refs.gongdanshuliangDom)
                .setOption(this.option51);
            echarts
                .init(this.$refs.chanpinquexianfenxiDom)
                .setOption(this.option31);
            echarts.init(this.$refs.gongdanqitaolvDom).setOption(this.option61);
        });
    },
    beforeDestroy() {
        this.stopScroll(); // 清除定时器
    },
    methods: {
        getRowHeights() {
            // 获取表格的 DOM 元素
            const tableElement = this.$refs.table.$el;
            console.log(tableElement);
            // 获取所有行
            const rows = tableElement.querySelectorAll(".el-table__row");
            // 遍历每一行并获取高度
            const heights = Array.from(rows).map((row) => row.offsetHeight);
            console.log("每行高度：", heights);
            return heights;
        },
        // 初始化扩展数据
        initializeData() {
            // 扩展数据：将原始数据复制一份追加到末尾
            this.extendedData = [...this.tableData, ...this.tableData];
        },
        // 开始滚动
        startScroll() {
            this.timer = setInterval(() => {
                this.scrollPosition += this.rowHeight; // 向下滚动一行
                this.isSmooth = true; // 平滑过渡
                // 如果滚动到最后一行（原始数据长度），等待过渡完成后跳回顶部
                if (
                    this.scrollPosition >=
                    this.rowHeight * this.tableData.length
                ) {
                    setTimeout(() => {
                        this.isSmooth = false; // 关闭过渡
                        this.scrollPosition = 0; // 瞬间跳回顶部
                    }, 1900);
                }
            }, 2000); // 每2秒滚动一次
        },
        // 停止滚动
        stopScroll() {
            clearInterval(this.timer);
        },
        // 监听过渡结束事件（备用）
        onTransitionEnd() {
            if (this.scrollPosition >= this.rowHeight * this.tableData.length) {
                this.isSmooth = false;
                this.scrollPosition = 0;
            }
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 4 == 1) {
                return "warning-row";
            } else if (rowIndex % 4 == 3) {
                return "success-row";
            }
            return "odd-row";
        },
        async getData() {
            await this.WitGlobal.requestCode(
                "SJKB.SC.db.manage.selectBoardScY",
                {}
            ).then((res) => {
                if (res.code == 200) {
                    this.dataMonth = res.data;
                    // this.dataMonth = [{
                    //   "wgs": "76",
                    //   "year": "2024",
                    //   "rwpcs": "34",
                    //   "pcjh": "87",
                    //   "y_wgs": "88",
                    //   "yqjh": "86",
                    //   "y_jswgs": "88",
                    //   "jswgs": "867",
                    //   "month": "1",
                    //   "zcrw": "123",
                    //   "gdqtl": "88",
                    //   "gds": "88",
                    //   "f_id": "633651006437096709",
                    //   "wcjh": "86",
                    //   "rwxfs": "1"
                    // }]
                    let monthList = [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ];
                    monthList.forEach((month) => {
                        let filetrList = this.dataMonth.filter(
                            (i) => Number(month) == Number(i.month)
                        );
                        let filterCurrentYear = filetrList.filter(
                            (i) => i.year == this.currentYear
                        );
                        if (filterCurrentYear.length > 0) {
                            if (filterCurrentYear[0].zcrw)
                                this.option11_data_currentYear.push(
                                    filterCurrentYear[0].zcrw
                                );
                            else this.option11_data_currentYear.push(0);
                            if (filterCurrentYear[0].rwxfs)
                                this.option12_data_currentYear.push(
                                    filterCurrentYear[0].rwxfs
                                );
                            else this.option12_data_currentYear.push(0);
                            if (filterCurrentYear[0].rwpcs)
                                this.option21_data_currentYear.push(
                                    filterCurrentYear[0].rwpcs
                                );
                            else this.option21_data_currentYear.push(0);
                            if (filterCurrentYear[0].wgs)
                                this.option22_data_currentYear.push(
                                    filterCurrentYear[0].wgs
                                );
                            else this.option22_data_currentYear.push(0);
                            if (filterCurrentYear[0].jswgs)
                                this.option23_data_currentYear.push(
                                    filterCurrentYear[0].jswgs
                                );
                            else this.option23_data_currentYear.push(0);
                            if (filterCurrentYear[0].pcjh)
                                this.option41_data_currentYear.push(
                                    filterCurrentYear[0].pcjh
                                );
                            else this.option41_data_currentYear.push(0);
                            if (filterCurrentYear[0].wcjh)
                                this.option42_data_currentYear.push(
                                    filterCurrentYear[0].wcjh
                                );
                            else this.option42_data_currentYear.push(0);
                            if (filterCurrentYear[0].yqjh)
                                this.option43_data_currentYear.push(
                                    filterCurrentYear[0].yqjh
                                );
                            else this.option43_data_currentYear.push(0);
                            if (filterCurrentYear[0].gds)
                                this.option51_data_currentYear.push(
                                    filterCurrentYear[0].gds
                                );
                            else this.option51_data_currentYear.push(0);
                            if (filterCurrentYear[0].y_wgs)
                                this.option52_data_currentYear.push(
                                    filterCurrentYear[0].y_wgs
                                );
                            else this.option52_data_currentYear.push(0);
                            if (filterCurrentYear[0].y_jswgs)
                                this.option53_data_currentYear.push(
                                    filterCurrentYear[0].y_jswgs
                                );
                            else this.option53_data_currentYear.push(0);
                            if (filterCurrentYear[0].gdqtl)
                                this.option61_data_currentYear.push(
                                    filterCurrentYear[0].gdqtl
                                );
                            else this.option61_data_currentYear.push(0);
                        } else {
                            this.option11_data_currentYear.push(0);
                            this.option12_data_currentYear.push(0);
                            this.option21_data_currentYear.push(0);
                            this.option22_data_currentYear.push(0);
                            this.option23_data_currentYear.push(0);
                            this.option41_data_currentYear.push(0);
                            this.option42_data_currentYear.push(0);
                            this.option43_data_currentYear.push(0);
                            this.option51_data_currentYear.push(0);
                            this.option52_data_currentYear.push(0);
                            this.option53_data_currentYear.push(0);
                            this.option61_data_currentYear.push(0);
                        }
                        let filterLastYear = filetrList.filter(
                            (i) => i.year == this.lastYear
                        );
                        if (filterLastYear.length > 0) {
                            if (filterLastYear[0].zcrw)
                                this.option11_data_lastYear.push(
                                    filterLastYear[0].zcrw
                                );
                            else this.option11_data_lastYear.push(0);
                            if (filterLastYear[0].rwxfs)
                                this.option12_data_lastYear.push(
                                    filterLastYear[0].rwxfs
                                );
                            else this.option12_data_lastYear.push(0);
                            if (filterLastYear[0].rwpcs)
                                this.option21_data_lastYear.push(
                                    filterLastYear[0].rwpcs
                                );
                            else this.option21_data_lastYear.push(0);
                            if (filterLastYear[0].wgs)
                                this.option22_data_lastYear.push(
                                    filterLastYear[0].wgs
                                );
                            else this.option22_data_lastYear.push(0);
                            if (filterLastYear[0].jswgs)
                                this.option23_data_lastYear.push(
                                    filterLastYear[0].jswgs
                                );
                            else this.option23_data_lastYear.push(0);
                            if (filterLastYear[0].pcjh)
                                this.option41_data_lastYear.push(
                                    filterLastYear[0].pcjh
                                );
                            else this.option41_data_lastYear.push(0);
                            if (filterLastYear[0].wcjh)
                                this.option42_data_lastYear.push(
                                    filterLastYear[0].wcjh
                                );
                            else this.option42_data_lastYear.push(0);
                            if (filterLastYear[0].yqjh)
                                this.option43_data_lastYear.push(
                                    filterLastYear[0].yqjh
                                );
                            else this.option43_data_lastYear.push(0);
                            if (filterLastYear[0].gds)
                                this.option51_data_lastYear.push(
                                    filterLastYear[0].gds
                                );
                            else this.option51_data_lastYear.push(0);
                            if (filterLastYear[0].y_wgs)
                                this.option52_data_lastYear.push(
                                    filterLastYear[0].y_wgs
                                );
                            else this.option52_data_lastYear.push(0);
                            if (filterCurrentYear[0].y_jswgs)
                                this.option53_data_lastYear.push(
                                    filterCurrentYear[0].y_jswgs
                                );
                            else this.option53_data_lastYear.push(0);
                        } else {
                            this.option11_data_lastYear.push(0);
                            this.option12_data_lastYear.push(0);
                            this.option21_data_lastYear.push(0);
                            this.option22_data_lastYear.push(0);
                            this.option23_data_lastYear.push(0);
                            this.option41_data_lastYear.push(0);
                            this.option42_data_lastYear.push(0);
                            this.option43_data_lastYear.push(0);
                            this.option51_data_lastYear.push(0);
                            this.option52_data_lastYear.push(0);
                            this.option53_data_lastYear.push(0);
                        }
                    });
                }
            });
            await this.WitGlobal.requestCode('SJKB.SC.db.manage.selectBoardScGdscjd', {}).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data;
                }
            });
            await this.WitGlobal.requestCode('SJKB.SC.db.manage.selectBoardScCpqx', {}).then(res => {
                if (res.code == 200) {
                    this.dataQueXian = res.data.map(item => {
                        if (item.name && item.num) {
                            return { value: item.num, name: item.name }
                        };
                    })
                }
            });
            await this.WitGlobal.requestCode('SJKB.SC.db.manage.selectBoardScJhwdcyyfx', {}).then(res => {
                if (res.code == 200) {
                    this.dataYuanYin = res.data.map(item => {
                        if (item.name && item.num) {
                            return { value: item.num, name: item.name }
                        };
                    })
                }
            });
        },
        tabChange1(name) {
            if (name == "在产任务") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.zaichanrenwuDom)
                        .setOption(this.option11);
                });
            } else if (name == "任务下发分布") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.renwuxiafafenbuDom)
                        .setOption(this.option12);
                });
            }
        },
        tabChange2(name) {
            if (name == "任务排产数量") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.renwupaichanshuliangDom)
                        .setOption(this.option21);
                });
            } else if (name == "完工数量") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.wangongshuliang2Dom)
                        .setOption(this.option22);
                });
            } else if (name == "及时完工数量") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.jishiwangongshuliang2Dom)
                        .setOption(this.option23);
                });
            }
        },
        tabChange3(name) {
            if (name == "产品缺陷分析") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.chanpinquexianfenxiDom)
                        .setOption(this.option31);
                });
            } else if (name == "计划未达成原因分析") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.jihuaweidachengyuanyinDom)
                        .setOption(this.option32);
                });
            }
        },
        tabChange4(name) {
            if (name == "排产计划") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.paichanjihuaDom)
                        .setOption(this.option41);
                });
            } else if (name == "完成计划") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.wanchengjihuaDom)
                        .setOption(this.option42);
                });
            } else if (name == "延期计划") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.yanqijihuaDom)
                        .setOption(this.option43);
                });
            }
        },
        tabChange5(name) {
            if (name == "工单数量") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.gongdanshuliangDom)
                        .setOption(this.option51);
                });
            } else if (name == "完工数量") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.wangongshuliangDom)
                        .setOption(this.option52);
                });
            } else if (name == "及时完工数量") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.jishiwangongshuliangDom)
                        .setOption(this.option53);
                });
            }
        },
    },
};
</script>
<style lang="scss" scoped>
	.el-table td>.cell {
		padding-left: 10px;
	}

	.el-table {
		height: 582px;
	}

	.el-table .warning-row {
		background: rgb(52, 57, 70);
	}

	.el-table .success-row {
		background: rgb(52, 57, 70);
	}

	.el-table .odd-row {
		background: rgb(29, 35, 49);
	}

	.el-table .el-table__cell {
		font-size: 16px !important;
		text-align: center;
	}

	.table_ {
		width: 100%;
		height: 582px;
		background: rgba(255, 255, 255, 0.05);
		position: relative;
	}

	.el-table th {
		background-color: rgb(29, 35, 49);
		color: #409eff;
	}

	.el-table {
		background: rgb(29, 35, 49);
		color: #dddddd;
	}

	.table-wrapper {
		position: relative;
		/* 设置表格总高度，包含表头 */
	}

	.table-header .el-table {
		margin-top: -2px;
		height: 44px;
	}

	.table-header {
		/* 表头固定在顶部 */
		position: relative;
		top: 0px;
		height: 44px;
		z-index: 1;
		/* 确保表头在上层 */
	}

	.scroll-wrapper {
		/* 表格内容容器，滚动的部分 */
		// height: 100%;
		/* 隐藏溢出的内容 */
		// position: relative;
		// display: block;
		overflow: hidden;
	}

	.scroll-wrapper .el-table__body {
		/* 内容部分需要启用平滑滚动效果 */
		will-change: transform;
	}

	.chart_ {
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.05);
	}

	.page_header {
		height: 80px;
		line-height: 70px;
		background: url(./top.png) no-repeat;
		background-size: cover;
		font-weight: 600;
		font-size: 24px;
		color: #ffffff;
		text-align: center;
        span{
            font-weight: 600;
            font-size: 40px;
            color: #ffffff;
            text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
            background: linear-gradient(0deg, #99bbff 0%, #ffffff 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            padding-top: 36px;
        }
	}

	.HomePageClass {
		width: 1920px;
		height: 1080px;
		background: #111726;
		display: flex;
		flex-direction: column;

		.homeContent {
			flex: auto;
			position: relative;
			margin-top: -60px;

			.homeBody {
				width: 100%;
				height: calc(100% - 65px);
				margin-top: 65px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 0 40px 40px 40px;

				&>div {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}

				.home_top {
					flex: auto;
					height: 640px;

					&>div {
						flex-shrink: 0;

						&:not(:last-child) {
							margin-right: 40px;
						}
					}

					.l_left,
					.l_right {
						width: 33%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						&>div {
							flex: 1;
						}
					}

					.l_center {
						flex: auto;
						height: 582px;
					}
				}

				.home_bottom {
					height: 320px;
					display: flex;
					flex-direction: row;

					&>div {
						flex-shrink: 0;
					}

					.l_left,
					.l_right {
						width: 50%;
					}

					.l_left {
						padding-right: 20px;
					}

					.l_right {
						padding-left: 20px;
					}

					.l_center {
						flex: auto;
					}
				}
			}
		}
	}
</style>